<template>
  <div>
    <div><button @click="addAddfn">修改价格</button></div>

    <div>一辆汽车{{ car.brand }}车，价格{{ car.price }}</div>
  </div>
</template>
<script setup lang="ts"  name= "person555">
import { ref } from "vue"; //复杂数据类型也可以用ref实现响应式 ，但是他底层需要求助reactive，你点value的时候可以看到，但是方法里面使用方式不同
let arr = ref([1, 5, 6]);
let car = ref({ brand: "奔驰", price: 100 }); //模板template，里面直接拿就行啦  只有方法里面需要.value
console.log("响应式", car); //目前打印这个数据已经不单纯啦  他已经成相应势的啦。他是个对象  只是使用 方式要加上.value，底层求助reactive
function addAddfn() {
  car.value.price = car.value.price + 10; //复杂数据类行不需要加value  目前已经实现响应式啦
  console.log("666", car);
}
//总结复杂数据类型只要被ref包裹 不管数据数据多深 都可以被监听到 结局了vue中$emit的问题,因为他底层也是求助了reactive
//可以借助只一个插件，当你使用ref时直接帮你.value (自动添加)
</script>